<template>
  <div class="settings-basic">
    <a-card class="settings-card">
      <template #title>商户认证信息</template>
      <a-form :model="basicForm" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item
              field="merchantName"
              label="店铺名称"
              :rules="[{ required: true, message: '请输入店铺名称' }]"
            >
              <a-input
                v-model="basicForm.merchantName"
                placeholder="请输入店铺名称"
                :max-length="30"
                show-word-limit
              />
            </a-form-item>
            <a-form-item
              field="realName"
              label="法人姓名"
              :rules="[{ required: true, message: '请输入法人姓名' }]"
            >
              <a-input
                v-model="basicForm.realName"
                placeholder="请输入法人姓名"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item field="businessLicense" label="营业执照">
          <a-upload
            list-type="picture-card"
            :file-list="basicForm.businessLicense"
            :limit="1"
            @change="handleLicenseChange"
          >
            <template #upload-button>
              <div class="upload-button">
                <icon-plus />
                <div class="upload-text">上传营业执照</div>
              </div>
            </template>
          </a-upload>
          <div class="form-item-tip">
            请上传清晰的营业执照照片，支持jpg、png格式
          </div>
        </a-form-item>

        <a-form-item field="idCard" label="身份证信息">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-input
                v-model="basicForm.idCard.number"
                placeholder="请输入身份证号码"
                :max-length="18"
              />
            </a-col>
            <a-col :span="12">
              <a-upload
                list-type="picture-card"
                :file-list="basicForm.idCard.images"
                :limit="2"
                @change="handleIdCardChange"
              >
                <template #upload-button>
                  <div class="upload-button">
                    <icon-plus />
                    <div class="upload-text">上传身份证照片</div>
                  </div>
                </template>
              </a-upload>
              <div class="form-item-tip">请上传身份证正反面照片</div>
            </a-col>
          </a-row>
        </a-form-item>

        <a-form-item field="address" label="经营地址">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-select
                v-model="basicForm.address.province"
                placeholder="请选择省份"
                @change="handleProvinceChange"
              >
                <a-option value="guangxi">广西壮族自治区</a-option>
                <!-- 其他省份选项 -->
              </a-select>
            </a-col>
            <a-col :span="8">
              <a-select
                v-model="basicForm.address.city"
                placeholder="请选择城市"
                @change="handleCityChange"
              >
                <a-option value="guigang">贵港市</a-option>
                <!-- 其他城市选项 -->
              </a-select>
            </a-col>
            <a-col :span="8">
              <a-select
                v-model="basicForm.address.district"
                placeholder="请选择区县"
              >
                <a-option value="gangbei">港北区</a-option>
                <a-option value="gangnan">港南区</a-option>
                <a-option value="qintang">覃塘区</a-option>
                <a-option value="guiping">桂平市</a-option>
                <a-option value="pingnan">平南县</a-option>
              </a-select>
            </a-col>
          </a-row>
          <a-input
            v-model="basicForm.address.detail"
            placeholder="请输入详细地址"
            class="mt-2"
          />
        </a-form-item>

        <a-form-item field="businessScope" label="经营范围">
          <a-select
            v-model="basicForm.businessScope"
            placeholder="请选择经营范围"
            multiple
          >
            <a-option value="cultural">文创产品</a-option>
            <a-option value="handcraft">手工艺品</a-option>
            <a-option value="souvenir">旅游纪念品</a-option>
            <a-option value="local">地方特产</a-option>
            <a-option value="tea">茶叶茶具</a-option>
            <a-option value="ceramic">陶瓷制品</a-option>
            <a-option value="intangible">非遗文化产品</a-option>
          </a-select>
        </a-form-item>

        <a-form-item field="qualification" label="资质认证">
          <a-upload
            list-type="picture-card"
            :file-list="basicForm.qualification"
            :limit="5"
            @change="handleQualificationChange"
          >
            <template #upload-button>
              <div class="upload-button">
                <icon-plus />
                <div class="upload-text">上传资质证书</div>
              </div>
            </template>
          </a-upload>
          <div class="form-item-tip">
            可上传品牌授权书、代理证书、商标注册证等资质文件
          </div>
        </a-form-item>

        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSaveBasic">
              保存修改
            </a-button>
            <a-button @click="handleReset"> 重置 </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import { IconPlus } from "@arco-design/web-vue/es/icon";

const basicForm = reactive({
  merchantName: "贵港文创商城",
  realName: "张三",
  businessLicense: [],
  idCard: {
    number: "",
    images: [],
  },
  address: {
    province: "guangxi",
    city: "guigang",
    district: "gangbei",
    detail: "",
  },
  businessScope: ["cultural", "handcraft"],
  qualification: [],
});

const handleLicenseChange = (fileList) => {
  basicForm.businessLicense = fileList;
};

const handleIdCardChange = (fileList) => {
  basicForm.idCard.images = fileList;
};

const handleQualificationChange = (fileList) => {
  basicForm.qualification = fileList;
};

const handleProvinceChange = () => {
  // 省份改变时重置城市和区县
  basicForm.address.city = "";
  basicForm.address.district = "";
};

const handleCityChange = () => {
  // 城市改变时重置区县
  basicForm.address.district = "";
};

const handleSaveBasic = () => {
  Message.success("基本信息保存成功");
};

const handleReset = () => {
  // 重置表单
  Object.assign(basicForm, {
    merchantName: "",
    realName: "",
    businessLicense: [],
    idCard: {
      number: "",
      images: [],
    },
    address: {
      province: "",
      city: "",
      district: "",
      detail: "",
    },
    businessScope: [],
    qualification: [],
  });
  Message.info("表单已重置");
};
</script>

<style lang="scss" scoped>
.settings-basic {
  .settings-card {
    margin-bottom: 1.5rem;
  }

  .upload-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .upload-text {
      margin-top: 0.5rem;
      font-size: 0.875rem;
      color: #6b7280;
    }
  }

  .form-item-tip {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #6b7280;
  }

  .mt-2 {
    margin-top: 0.5rem;
  }
}
</style>
